<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <category-icons></category-icons>
      <div v-if="!errorShow">
        <home-title :title="homeTitle.viewTitle"></home-title>
        <view-list :viewDatas="homeDatas.viewDatas"></view-list>

        <home-title :title="homeTitle.foodTitle"></home-title>
        <food-list :foodDatas="homeDatas.foodDatas"></food-list>

        <home-title :title="homeTitle.hotelTitle"></home-title>
        <hotel-list :hotelDatas="homeDatas.hotelDatas"></hotel-list>

        <home-title :title="homeTitle.massageTitle"></home-title>
        <massage-list :massageDatas="homeDatas.massageDatas"></massage-list>

        <home-title :title="homeTitle.ktvTitle"></home-title>
        <ktv-list :ktvDatas="homeDatas.ktvDatas"></ktv-list>
      </div>
      <error :errorShow="errorShow"></error>
    </div>
  </div>
</template>

<script>
//BetterScroll重点解决移动端（已支持 PC）各种滚动场景需求的插件
/**  BetterScroll初始化的时候必须传入一个节点，在该程序中传入的节点为
<div class="scroll-wrapper" ref="wrapper">*/
// <div class="scroll-content">这里面才是滚动区域的内容</div >
import BetterScroll from 'better-scroll';

import CategoryIcons from './CategoryIcons/Index';
import HomeTitle from './Sub/HomeTitle';
import ViewList from './ViewList/Index';
import FoodList from './FoodList/Index';
import HotelList from './HotelList/Index';
import MassageList from './MassageList/Index';
import KtvList from './KtvList/Index';
import Error from './Sub/Error'

import { mapState } from 'vuex';
import { IndexModel } from 'models/index.js';
import tools from 'utils/tools.js';


export default {
  name: 'HomeScrollWrapper',
  components: {
    CategoryIcons,
    HomeTitle,
    ViewList,
    FoodList,
    HotelList,
    MassageList,
    KtvList,
    Error
  },
  data() {
    return {
      currentCityId: 0,
      errorShow: false,
      homeDatas: {
        foodDatas: [],
        hotelDatas: [],
        ktvDatas: [],
        massageDatas: [],
        viewDatas: []
      },
      homeTitle: {
        foodTitle: '推荐美食',
        hotelTitle: '推荐酒店',
        ktvTitle: '推荐KTV',
        massageTitle: '推荐按摩',
        viewTitle: '推荐景点'
      }
    }
  },
  computed: {
    ...mapState(['cityId'])
  },
  mounted() {
    // 在组件挂载完毕时，BetterScroll才初始化
    this.scroll = new BetterScroll(this.$refs.wrapper);
    this.currentCityId = this.cityId;
    this.getHomeDatas(this.currentCityId);
  },
  activated() {
    //是<keep-alive>的生命周期，为了实现缓存机制 
    if (this.currentCityId !== this.cityId) {
      this.currentCityId = this.cityId;
      this.getHomeDatas(this.currentCityId);
    }
  },
  methods: {
    getHomeDatas(cityId) {
      const indexModel = new IndexModel();

      indexModel.getHomeDatas(cityId).then(res => {
        if (res && res.status === 0) {
          const data = res.data;

          this.errorShow = false;
          this.homeDatas.foodDatas = tools.formatJSON(data.foodDatas, 'keyword');
          this.homeDatas.hotelDatas = data.hotelDatas;
          this.homeDatas.ktvDatas = data.ktvDatas;
          this.homeDatas.massageDatas = data.massageDatas;
          this.homeDatas.viewDatas = data.viewDatas;
        } else {
          this.errorShow = true;
          console.log({
            statusCode: res.status,
            errorMsg: res.error
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>